<template>
    <div>
        <el-card class="mb-10">
            <CategorySelector :disabled="false"></CategorySelector>
        </el-card>

        <el-card>
            <SpuList v-if="(showStatus == STATUS.SPULIST)" v-model="showStatus" @changeSpuInfo="changeSpuInfo"></SpuList>
            <SpuForm v-if="(showStatus == STATUS.SPUFORM)" v-model="showStatus" :spuInfo="spuInfo" @changeSpuInfo="changeSpuInfo"></SpuForm>
            <SkuForm v-if="(showStatus == STATUS.SKUFORM)" v-model="showStatus" :spuInfo="spuInfo" @changeSpuInfo="changeSpuInfo"></SkuForm>
            <!-- <SpuList v-if="(showStatus == 1)" @updateShowStatus="updateShowStatus"></SpuList>
            <SpuForm v-if="(showStatus == 2)" @updateShowStatus="updateShowStatus"></SpuForm>
            <SkuForm v-if="(showStatus == 3)" @updateShowStatus="updateShowStatus"></SkuForm> -->
        </el-card>
    </div>
</template>
<script lang="ts">
// 枚举 - 把枚举单独放到一个script标签中即可
export enum STATUS {
    SPULIST = 1, // 1 是SpuList展示
    SPUFORM = 2, // 2是SpuForm展示
    SKUFORM = 3  // 3是 SkuForm展示
}
</script>
<script setup lang="ts">
import SpuList from './components/SpuList/index.vue'
import SpuForm from './components/SpuForm/index.vue'
import SkuForm from './components/SkuForm/index.vue'
import { ref } from 'vue';
import type { SpuModel } from '@/api/spu'
// 通过 showStatus 控制三个界面的切换
const showStatus = ref(STATUS.SPULIST);

// 当前页面必须有 category3Id 才能打开,【后续】要给主列表界面的"添加SPU"按钮加限制条件
const initSpuInfo = (): SpuModel => ({
    spuName: '',
    description: '',
    category3Id: undefined,
    tmId: undefined,
    spuSaleAttrList: [],
    spuImageList: []
})

const spuInfo = ref<SpuModel>(initSpuInfo());
const changeSpuInfo = (row?: SpuModel) => {
    spuInfo.value = row ? row : initSpuInfo()
}


// // 子组件触发自定义事件,修改界面展示状态
// const updateShowStatus = (status: number) => {
//     showStatus.value = status;
// }
</script>
  
  
<style scoped>

</style>